Hexo + github 博客搭建过程

发表于 | 更新于 | 分类于 | 阅读次数
字数统计 2,378 字 | 阅读时长 10 分钟

最近想建个博客记录一下平时的一些技术细节，以后可以随时翻翻，发现以前做过的事总是很容易忘记，真是好记性不如烂笔头,顺便整理一下思路。

  • 整理知识，学习笔记
  • 发布日记，杂文，所见所想
  • 撰写发布技术文稿（代码支持）
  • 撰写发布学术论文（LaTeX 公式支持）

搭建环境

  • Windows10 64位
  • node@4.4 后变成6.1.0
  • hexo@3.3.7

前期

百度知道了搭建博客用wordpress等需要有服务器，买不起，虽然后面知道了GitHub大礼包，有digitalOcean 提供的优惠劵，但已经不想折腾wordpress了，以后再说。所以用了github page这个功能，再加上hexo ,类似的还有jekyll,但jekyll 好像命令有些复杂，而且需要依赖的东西有点多，所以选了hexo,hexo 用户量级好像不如jekyll。

Hexo 是什么

Hexo 可以快速，简洁，高效的搭建博客框架，方便的生成静态网页 托管在github上。它是台湾的@tommy351编写的，基于Node.js。

搭建博客

安装git

参考了博客http://blog.csdn.net/SmallCheric/article/details/51049683的教程，下载并安装了[Git](https://git-for-windows.github.io/)

用以下命令查看git版本

1
git --version

安装Node.js

windows环境下的Node.js的安装很简单,只需要下载客户端一路next就行了,第一次选择前面提到博客中的v4.4.0LTS版本64位的，后来因为css样式显示不出来，又下载了新版本V6.110，升级node又是一番折腾，后面再提。
用以下命令查看版本号：

1
node -v

安装Hexo

Node.js 安装完成后，在电脑任意位置，右键选择GitBash ,执行npm命令

  • npm install -g hexo

安装完成后，建立一个文件夹（E:\Hexo）,在建立的文件夹内右键,选择gitbush,执行以下命令，就在目标文件夹下创建建立博客所需的文件。

  • hexo init

然后

  • hexo install

初始化完成目录图：
init

这是参考了http://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html的教程

1
2
＄hexo g　#生成
$hexo s  #启动服务，本地浏览

执行以上命令，hexo会把public文件夹里的东西提交到github上，同时在public 文件夹中生成相关html文件。

hexo s 开启本地服务端口，打开浏览器http://localhost:4000 即可看到内容，啊哈^-^ ,没想到写到这个竟然解决的本地没有css的问题，原来自己一直是点击Index.html打开网页，不是用以上网址打开，所以css样式显示不出来，但是为什么呢，不求甚解，难道是不用那个网址没法渲染，找不到css样式，但自己看了看源代码，觉得应该能找到啊，不解。
css 代码：

1
<link rel="stylesheet" type="text/css" href="/./main.b3331d.css">

顺便记录一下路径的问题：

./ 当前路径
/ 网站根路径
../ 上一层目录，如../../表示上上层目录

当前路径是指和本文件同在一个文件夹下，这是可以用相对路径。

修改端口号：执行命令hexo s -p 5000

修改主题

官方主题
下载了2个主题：
hexo-them-jekyll和hexo-theme-yilia

下载主题：

1
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下载后的主题在themes文件夹中，修改—config.yml中的theme: landscape为theme: yilia,然后执行hexo g生成，注意hexo g 每次执行都会把public 文件夹的东西更新一次，还有theme 冒号后面注意有空格。

如果有问题，执行hexo clean,清理public 的内容，然后重新生成和发布。

上传

hexo上传代码会把以前的代码都删掉，注意备份。

首先，配置ssh_key,用ssh key 解决本地与服务器连接的问题。可参考百度经验。

1
$ cd ~/.ssh #检查本机已存在的ssh密钥

1
$ ssh-keygen -t -C "github注册邮件地址"

会生成一个文件.ssh\id_rsa.pub，复制里面的内容到github，个人设置-》SSH and GPG key中-》New SSh key

测试是否成功：

1
$ ssh -T git@github.com

然后配置：

1
2
$ git config --global user.name "**"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

配置：config_yml中deploy,

1
2
3
4
deploy:
  type: git
  repository: git@github.com:lian/lian.github.io.git
  branch: master

后又改成这个，http似乎不能写成https

1
2
3
4
deploy:
  type: git
  repository: http://github.com/lian/lian.github.io.git
  branch: master

如果报deployer not found,是因为没有安装插件。
打开 git bash，输入hexo d提交改动代码到github。

保留CNAME等文件
把这些文件放到source文件夹中，这里的所有文件会原样复制到public文件夹中。
http://blog.liuxianan.com/build-blog-website-by-hexo-github.html 中可下载作者的md文件。

介绍markdawn 语法
Hexo文件夹结构

设置next主题,参考博客。

搭建过程中问题

1、生成时hexo 报错 Cannot read property ‘replace’ of null

解决：

_config.yml 配置文件中的url 设置错误

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://lian.github.io
root: \
permalink: :year/:month/:day/:title/
permalink_defaults:

root 后是根路径，与css文件路径有关

2、 ERROR Plugin load failed: hexo-generator-json-content

升级node.js到最新稳定版
升级node，参照博客,先安装gnvm，点击exe发现在cmd下找不到，弃之，后直接下载node安装。

执行命令 npm i hexo-generator-json-content –save

3、提交时出现错误ERROR Plugin load failed: hexo-deployer-git

解决

执行 npm install hexo-deployer-git –save

4、config 中文乱码
在sublime里打开，保存为GBK-8格式

常见hexo命令

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写：

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令：

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

markdown

1
2
3
4
5
6
7
8
9
10
在英文输入法下:
'''
''' 表示 代码块
 #到###### 表示标题
 ** dd**  加粗
 * dd*  斜体
 [ ]（） 链接
<！-- more -->
！[init]（连接） 图片
* 标号

title: postName #文章页面上的显示名称，一般是中文
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3]#文章标签，可空，多标签请用格式，注意:后面有个空格

域名解析

用namecheap解析域名步骤参考文章

关于A解析和CNAME解析的区别：

A解析：只能填IP地址，IP地址如果换了的话就需要换解析记录
CNAME解析：解析到另一个域名，即使被指向的域名的ip发生变化，也不需要更改解析记录。CNAME优先级高于A解析（至少在DNSPOD是这样的）

给网站添加favicon

这个和主题有关，默认可能没有，浏览器打开后根据开发者工具里可以看到当前主题下’favicon’的具体路径和要求文件格式，对应做一个就可以了。有时候是’png’但也有时候强制要求’.ico’，可以去比特虫等网站在线制作。

博客优化

（12月2日更新）
根据官网配置了本地搜索 社交链接 打赏功能 友情链接 百度统计

文章阅读量统计配置LeanCloud

文章【字数统计】、【阅读时长】统计功能

安装wordcount插件

npm i –save hexo-wordcount
npm install hexo-generator-searchdb –save

显示文字

用 Sublime Text 工具打开 post.swig 文件，路径如下：xxx_blog/themes/next/layout/_macro/post.swig

增加网站的浏览次数与访客数量统计功能

网站的浏览次数，即pv；网站的访客数为uv。pv的计算方式是，单个用户连续点击n篇文章，记录n次访问量；uv的计算方式是，单个用户连续点击n篇文章，只记录1次访客数。你可以根据需要添加相应的统计功能。
安装busuanzi.js脚本

如果你使用的是NexT主题（其他主题类似），打开/theme/next/layout/_partial/footer.swig文件，拷贝下面的代码至文件的开头。

显示统计标签

同样编辑/theme/next/layout/_partial/footer.swig文件。

如果你想要显示pv统计量，复制以下代码至你想要放置的位置，


本站总访问量次

如果你想要显示uv统计量，复制以下代码至你想要放置的位置，


本站访客数人次

hexo数学公式显示

这个折腾了两天，放弃之后结果莫名其妙可以显示了。

主要使用的命令

npm install hexo-math –save
hexo math install
npm uninstall hexo-renderer-marked –save
npm install hexo-renderer-kramed –save
npm install hexo-renderer-mathjax –save

kramed是在marked上作了修改。
hexo-renderer-kramed渲染后公式消失了，最终卸载了。

最终的方案：

用编辑器打开marked.js（在./node_modules/marked/lib/中）
Step 1:

escape: /^\([\`*{}[]()# +-.!_>])/,

替换成

escape: /^\([`*[]()# +-.!_>])/,

这一步是在原基础上取消了对\,{,}的转义(escape)
Step 2:

em: /^\b((?:[^]|_)+?)\b|^*((?:**|[\s\S])+?)*(?!*)/,

替换成

em:/^*((?:**|[\s\S])+?)*(?!*)/,

进入到主题目录，找到_config.yml配置问题，把mathjax默认的false修改为true，具体如下：

MathJax Support

mathjax:
enable: true
per_page: true

参考文献：
http://blog.csdn.net/emptyset110/article/details/50123231

http://masikkk.com/article/hexo-13-MathJax/

坚持原创技术分享，您的支持将鼓励我继续创作！